<template>
  <div class="comment">
    <main>
      <div class="comment-row">
        <avatar :avatar="userInfo.avatar" :size="30"/>
        <el-input
            v-model="comment"
            type="textarea"
            placeholder="请输入评论"
            :autosize="{minRows:4}"
            :maxlength="commentLimit"
            resize="none"
        />
      </div>
      <div style="text-align: right;margin-top: 20px">
        {{ comment.length }} / {{ this.commentLimit }}
        <el-button type="primary" @click="publish">发表评论</el-button>
      </div>
    </main>
    <comment-list :comment-list="commentList"/>
  </div>
</template>

<script>
import CommentList from "@/views/detail/comment/comment-list";
import comment from "@/api/comment";
import Avatar from "@/components/avatar";

export default {
  name: "comment",
  components: {Avatar, CommentList},
  data() {
    return {
      commentList: [],
      comment: '',
      articleId: '',
      commentLimit: 255
    }
  },
  methods: {
    publish() {
      if(this.userInfo.userId){
        const data = {
          comment: this.comment,
          userId: this.userInfo.userId,
          articleId: this.articleId,
        }
        comment.publish(data)
            .then((res) => {
              console.log(res)
              if (res.code === 200) {
                this.comment = ''
                this.$success('评论成功')
                this.getCommentList()
              } else {
                this.$error(res.msg)
              }
            })
            .catch((err) => {
              this.$error(err)
            })
      }else{
        this.$warning('请先登录')
      }
    },
    getCommentList() {
      comment.getList({articleId: this.articleId})
        .then((res) => {
          if(res.code === 200){
            this.commentList = res.data
          }else{
            this.$error(res.msg)
          }
        })
        .catch((err) => {
          this.$error(err)
        })
    }
  }
}
</script>

<style lang="less" scoped>
.comment {
  width: 800px;
  box-sizing: border-box;
  background-color: #fff;
  border-top: 1px solid #f1f1f1;
  padding: 20px;

  main {
    padding: 40px 0;

    border-bottom: 1px solid #f1f1f1;

    .comment-row {
      display: flex;

      img {
        .size(30px);
        border-radius: 50%;
        margin-right: 20px;
      }
    }

  }
}

</style>